<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>用户登录</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #wrap{
            width: 100%;
            height: 100%;
            min-width: 900px;
            min-height: 600px;
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556601552547&di=4e74687b02806768ea164fa6379349c1&imgtype=0&src=http%3A%2F%2Fimg.3727.cc%2FImages%2FPicture%2Ffengjinggaoqingzhuomianbizhi%2Fmatoushengdanshubizhi%2F4-140R9102347.jpg) center center / cover no-repeat;
            position: fixed;
            left: 0;
            top: 0;
        }
        #content{
            box-sizing: border-box;
            padding: 30px 60px;
            width: 400px;
            height: 360px;
            background-color: #fff;
            border-radius: 10px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .title{
            margin-bottom: 40px;
            font-size: 20px;
            text-align: center;
        }
        .input{
            display: block;
            margin-top: 20px;
            box-sizing: border-box;
            padding: 0 15px;
            width: 100%;
            height: 50px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
        }
        .btn{
            margin-top: 40px;
            box-sizing: border-box;
            width: 100%;
            height: 50px;
            background-color: #409EFF;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>

<body>
<div id="wrap">
    <div id="content">
        <div class="title">用户登录</div>
        <form action="" onsubmit="return false" id="form">
            <input class="input" id="name" type="text" placeholder="请输入账号">
            <input class="input" id="password" type="password" placeholder="请输入密码">
            <input class="btn" type="submit" value="登录">
        </form>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="__STATIC__/plugs/layui/layui.all.js"></script>
<script>
    $(function(){
        $("#form").on("submit",function(){
            var name = $("#name").val();
            if (!name) {
                layer.msg('请输入账号！');
                return false
            }
            var password = $("#password").val();
            if (!password) {
                // 提示
                layer.msg('请输入密码！');
                return false
            }
            $.ajax({
                type: "post",
                url: location.href,
                data: {
                    name:name,
                    password:password
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.code != 200) {
                        layer.msg(res.msg,{icon:2,time:2000});
                        return false;
                    } else {
                        layer.msg(res.msg,{icon:1,time:2000,end:function () {
                                location.replace("/index/index/index");
                            }});
                    }
                },error: function (res) {
                    return false;
                }
            });
        })
    })
</script>
</body>

</html>
